<template>
	<div class="person-box">
		<div class="tabs">
			<div
				class="tab-item"
				:class="{ active: currentTab == i }"
				v-for="(item, i) in tabs"
				:key="i"
				@click="changeTab(i)"
			>
				{{ item.name }}
			</div>
		</div>
		<div class="person-list" v-loading="loading">
			<swiper
				:modules="modules"
				:slides-per-view="1"
				:space-between="50"
				:pagination="{ clickable: true }"
				:scrollbar="{ draggable: true }"
				@swiper="onSwiper"
				@slideChange="onSlideChange"
				autoplay
			>
			<swiper-slide v-for="(party, index) in partyList" :key="index">
					<div class="slide-list">
						<div class="person-list-item" v-for="(item, i) in party" :key="i">
							<div class="person-info flex">
								<div class="head">
									<img :src="item.photo ? item.photo : defaultPhoto" class="image" alt="" />
								</div>
								<div class="infos">
									<div class="name">姓名：{{ item.name }}
										<img src="../assets/images/person/video-icon.png" @click="showVideo(item)" v-if="item.videoUrl">
									</div>
									<div class="score" v-if="item.score">考核分：{{ item.score }}分</div>
									<div class="time" v-if="item.workHours">工时：{{ item.workHours }}小时</div>
								</div>
							</div>
							<div class="tags">
								<div class="tag">{{ item.post }}</div>
								<div class="tag">{{ item.area }}</div>
							</div>
							<div class="des">
								<div>表彰事迹：</div>
								<div class="content">{{ item.digest }}</div>
								<div class="details-text" @click="showDetails(item)">查看详情>></div>
							</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
		</div>
	</div>

	<el-dialog
        v-model="dialogVisible"
        title="人员风采详细信息"
        width="1076px"
        custom-class="person-info-dialog"
    >	
		<div class="person-info-wrap">
			<div class="person-info flex">
				<div class="head">
					<el-image :src="details.photo ? details.photo : defaultPhoto" class="image"></el-image>
				</div>
				<div class="infos">
					<div class="name">姓名：{{ details.name }}
						<img src="../assets/images/person/video-icon.png" @click="showVideo(details)" v-if="details.videoUrl">
					</div>
					<div class="score" v-if="details.score">考核分：{{ details.score }}分</div>
					<div class="time" v-if="details.workHours">工时：{{ details.workHours }}小时</div>
					<div class="tags">
						<div class="tag">{{ details.post }}</div>
						<div class="tag">{{ details.area }}</div>
					</div>
				</div>
			</div>
			<el-scrollbar class="des">
				<div>表彰事迹：</div>
				<div v-html="details.des"></div>
			</el-scrollbar>
		</div>
    </el-dialog>

	<play-video ref="playVideo"></play-video>

</template>

<script setup>
import { getPartyList } from "../common/apis";
import util from "../common/utils";
import { onMounted } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Scrollbar, A11y, Virtual, Autoplay } from "swiper";
import PlayVideo from '@/components/Service/PlayVideo.vue'
import "swiper/scss";
import "swiper/scss/pagination";
import "swiper/scss/scrollbar";
import defaultPhoto from '../assets/images/person/default.png'

const modules = $ref([Pagination, A11y, Autoplay]);

const currentTab = $ref(0);
const activeIndex = $ref(0); //当前滑动索引
const loading = $ref(false)
const tabs = $ref([
	{
		name: "十佳公益岗",
		id: 1,
	},
	{
		name: "党员风采",
		id: 2,
	},
]);


const type = $ref(1);
const partyList = $ref([]);

onMounted(() => {
	getList();
});

const getList = async () => {
	loading = true;
	let res = await getPartyList({
		type: currentTab + 1,
	});
	loading = false;
	if (res.success) {
		let temp = res.result;
		let arr = [];
		temp.forEach((it, i) => {
			arr.push(it);
			if (arr.length >= 10 || temp.length == i + 1) {
				partyList.push(arr);
				arr = [];
			}
		});
	} else {
		util.toast(res.message);
	}
};

const onSwiper = (swiper) => {
	activeIndex = swiper.activeIndex;
};
const onSlideChange = (i) => {
	// console.log("slide change", i.activeIndex);
	activeIndex = i.activeIndex;
};
const changeTab = (i) => {
	currentTab = i;
	partyList = []
	getList();
};

// 显示详情
let dialogVisible = $ref(false)
let details = $ref({})

const showDetails = (data) => {
	dialogVisible = true
	details = data
}


let playVideo = $ref(null)
const showVideo = ({ name, videoUrl }) => {
	playVideo.showVideoDialog({
		biaoti: name,
		url: videoUrl
	})
}


</script>

<style lang="scss">
@import "../assets/css/common.scss";
.person-box {
	width: 100%;
	height: 100%;
	overflow: hidden;
	// top: 114px;
	// left: 39px;
	.tabs {
		width: 370px;
		height: 48px;
		background: #00a7e0;
		color: #fff;
		display: flex;
		align-items: center;
		border-radius: 4px;
		.tab-item {
			flex: 0 0 50%;
			line-height: 48px;
			text-align: center;
			font-size: 24px;
			font-weight: bold;
			cursor: pointer;
			transition: all 0.3s;
			background: #00a7e0;
		}
		.active {
			background: linear-gradient(to top, #ef9f00, #5e4001);
		}
	}
	.person-list {
		margin-top: 20px;
		width: 1520px;
		height: 800px;

		.slide-list {
			display: flex;
			flex-wrap: wrap;
			width: 1520px;
			height: 730px;
			.person-list-item {
				width: 304px;
				height: 320px;
				color: #fff;
				background: url("../assets/images/person/person-box-bg.png") no-repeat;
				background-size: 100% 100%;
				padding: 30px 24px 30px 30px;

				&:hover {
					background: url("../assets/images/person/person-box-bg-on.png") no-repeat;
				}
			}

		}

		.swiper-slide {
		}
	}
}

.person-info-dialog.el-dialog{
	background: url('../assets/images/person/dialog-bg.png') center no-repeat;
	background-size: 100% 100%;
	.el-dialog__title, .el-dialog__close{
		color: #fff;
	}

	.person-info-wrap{
		padding: 0 40px 60px;
		color: #fff;
	}

	.des{
		color: #00D7E5;
		font-size: 18px;
		line-height: 26px;
		height: 400px;
	}
}

.person-list-item{
	.person-info {
		display: flex;
		// align-items: center;
		height: 110px;
		.head {
			width: 88px;
			height: 88px;
			border-radius: 50%;
			margin-right: 15px;
			.image {
				width: 100%;
				// height: 100%;
			}
		}
		.infos {
			flex: 1;
			line-height: 34px;
			.name {
				font-size: 16px;
			}
			img{
				vertical-align: middle;
				margin-top: -5px;
				cursor: pointer;
				// margin-left: px;
			}

			.score,
			.time {
				font-size: 14px;
				margin-top: 10px;
			}
		}
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		padding-top: 10px;
		.tag {
			flex: 1;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			background: $main-blue;
			padding: 5px 7px;
			font-size: 14px;
			margin-right: 5px;
			margin-bottom: 5px;
		}
	}

	.des {
		height: 100px;
		line-height: 26px;
		word-break: break-all;
		padding: 0 5px;
		color: $main-color;
		font-size: 16px;
		position: relative;
		overflow: hidden;
		&::-webkit-scrollbar {
			width: 0 !important;
		}

		.content{
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 5;
			-webkit-box-orient: vertical;
		}

		.details-text{
			position: absolute;
			width: 110px;
			text-align: right;
			right: 5px;
			bottom: -4px;
			color: #FFAC07;
			background: #00007B;
			cursor: pointer;
		}
	}
}

.person-info-dialog{
	.person-info {
		display: flex;
		align-items: center;
		height: 130px;
		.head {
			width: 104px;
			height: 104px;
			border-radius: 50%;
			margin-right: 15px;
			margin-top: -28px;
			.image {
				width: 100%;
				// height: 100%;
			}
		}
		.infos {
			flex: 1;
			.name {
				font-size: 18px;
				font-weight: 500;
			}
			img{
				vertical-align: top;
				cursor: pointer;
				margin-left: 5px;
			}

			.score,
			.time {
				font-size: 14px;
				margin-top: 10px;
			}
			.tags {
				margin-top: 10px;
				display: flex;
				flex-wrap: wrap;
				.tag {
					background: $main-blue;
					padding: 5px 7px;
					font-size: 14px;
					margin-right: 5px;
					margin-bottom: 5px;
				}
			}
		}
	}

	.des {
		margin-top: 16px;
		height: 150px;
		line-height: 24px;
		word-break: break-all;
		color: $main-color;
		font-size: 16px;
		position: relative;
		overflow: hidden;
		&::-webkit-scrollbar {
			width: 0 !important;
		}

		.content{
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 5;
			-webkit-box-orient: vertical;
		}

		.details-text{
			position: absolute;
			width: 110px;
			text-align: right;
			right: 0;
			bottom: 5px;
			color: #FFAC07;
			background: #00007B;
			cursor: pointer;
		}
	}
}

</style>
